<template>
  <div class="user-info-content">
    <div class="author-desc">
      <p>
        我是一名WEB开发者，目前住在湖南长沙的岳麓区，拥有一年前端开发经验，我喜欢探索前端各种新颖技术，将学习到的知识与他人一起分享交流，我的最大愿景是能构建高性能、跨多端且能够媲美Native的WEB应用程序。
      </p>
      <p class="tips">at last...我也同时拥有一位甜美可爱的女程序媛😊</p>
    </div>
    <div class="author-daily">
      <p>
        现在每天早上起床，除了日常开发工作之外，喜欢浏览<strong
          style="font-weight: bold"
          >StackOverflow</strong
        >帮助他人解答问题，在<strong style="font-weight: bold">Wechat</strong
        >上和网友们一同探讨前端技术。
      </p>
    </div>
    <div class="profession-skill">
      <div class="skill-text">必须要掌握的专业技能</div>
      <div class="split-line"></div>
    </div>
    <div class="author-skill">
      <div class="js-base skill-card">
          <h3>重要的基础</h3>
          <p>熟练使用JavaScript进行页面功能逻辑开发，具备运用CSS3搭配HTML5开发出页面骨架自适应性强，动画流畅的能力。</p>
      </div>
      <div class="framework-base skill-card">
            <h3>必要的提升</h3>
            <p>能够运用React、Vue等前端流行开发框架开发SPA应用程序</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "user-info-content",
};
</script>

<style lang='less'>
.user-info-content {
  .author-desc {
    font-size: 38px;
    font-weight: 700;
    word-break: break-all;
    line-height: 1.2;

    .tips {
      font-size: 24px;
      margin: 20px 0;
    }
  }

  .profession-skill {
    margin-top: 40px;
    display: flex;
  }

  .author-daily {
    font-size: 20px;
    line-height: 1.4;
  }

  .skill-text {
    color: #767e91;
    font-size: 14px;
  }

  .split-line {
    flex: 1;
    padding-left: 10px;
    height: 1px;
    margin: auto;
    background-clip: content-box;
    background-color: #767e91;
  }

  .skill-card {
    border-radius: 10px;
    margin: 40px 20px;
    padding: 60px 50px;
    transition: 0.3s all cubic-bezier(0,0,0.2,1);
    cursor: pointer;
    height: 140px;
    color: hsla(0,0%,100%,.8);

    
    &:hover {
      transform: scale(1.02);
      box-shadow: 0 0 4px rgba(48, 55, 83, 0.1);
    }

    h3 {
        font-size: 28px;
    }

    p {
        font-size: 22px;
        line-height: 1.3;
        margin-top: 30px;
    }
  }

  .js-base {
    background-color: #000;
  }

  .framework-base {
      background-color: #2970ff;
  }
}
</style>